<script setup>
import { ref, reactive, toRaw } from 'vue';
import { service, common } from '@utils';
import { ElMessage } from 'element-plus';
import { provinceAndCityData } from 'element-china-area-data';
// import type from '../../components/search/type';
const emit = defineEmits(['refresh', 'getTree']);
const visible = ref(false);
const formRef = ref();
const tabName = ref(1);
const title = ref('');
const label = ref('');
const state = reactive({
    param: {},
    orgGroupPageData: [],
    cityData: [],
    sysdirectList: [],
    filetrData: [],
});
const rules = {
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    code: [{ required: true, message: '请输入', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入', trigger: 'blur' }],
};
const open = (type, data) => {
    getData();
    let cityData = JSON.parse(JSON.stringify(provinceAndCityData));
    cityData[0].children[0].label = '北京市';
    cityData[1].children[0].label = '天津市';
    cityData[8].children[0].label = '上海市';
    cityData[21].children[0].label = '重庆市';
    state.cityData = cityData;
    state.param = JSON.parse(JSON.stringify(data));
    title.value = type;
    if (type == '编辑') {
        state.filetrData = data.filterCriteriaList;
        if (typeof state.param.city == 'string') {
            state.param.city = state.param.city.split(',');
        }
        if (state.param.filterCriteriaList && state.param.filterCriteriaList.length > 0) {
            let filterCriteria = [];
            state.param.filterCriteriaList.forEach(item => {
                filterCriteria.push(item.label);
            });
            state.param.filterCriteria = filterCriteria;
        }
    }
    visible.value = true;
};

const close = () => {
    visible.value = false;
    state.param = {};
};

const getData = async () => {
    const res = await service.auth.sysdirectListbyCode({ code: 'VEHICLES_UNDER_NAME,PROPERTY_UNDER_NAME,ACCUMULATION_FUND,SESAME_SEED,REAL_NAME,PRECONDITIONS_RISK' });
    const data = [
        {
            id: 1,
            label: '名下房产情况',
            value: '1-0',
            children: [],
            bool: true,
        },
        {
            id: 2,
            label: '名下车辆情况',
            value: '2-0',
            children: [],
            bool: true,
        },
        {
            id: 3,
            label: '公积金信息',
            value: '3-0',
            children: [],
            bool: true,
        },
        {
            id: 4,
            label: '芝麻分情况',
            value: '4-0',
            children: [],
            bool: true,
        },
        {
            id: 5,
            label: '是否实名',
            value: '5-0',
            children: [],
            bool: true,
        },
        {
            id: 6,
            label: '前置风控',
            value: '6-0',
            children: [],
            bool: true,
        },
    ];
    if (res) {
        res.forEach(item => {
            if (item.typeCode == 'PROPERTY_UNDER_NAME') {
                data[0].children.push(item);
            } else if (item.typeCode == 'ACCUMULATION_FUND') {
                data[2].children.push(item);
            } else if (item.typeCode == 'SESAME_SEED') {
                data[3].children.push(item);
            } else if (item.typeCode == 'REAL_NAME') {
                data[4].children.push(item);
            }
        });
    }
    state.sysdirectList = data;
    // if (orgGroupPageData.resultCode == 8200) {
    //     state.orgGroupPageData = orgGroupPageData.list;
    // }
};
const sure = async () => {
    let param = JSON.parse(JSON.stringify(state.param));
    param.filterCriteria = state.filetrData;
    param.city = param.city.join(',');
    formRef.value.validate(valid => {
        if (valid) {
            realSubmit(param);
        }
    });
};
const filterChange = (val, check) => {
    let data = [];
    console.log(check.checkedNodes)
    check.checkedNodes.forEach(item => {
        if (!item.bool) {
            data.push({ value: item.value, key: item.typeCode, label: item.label });
        }
    });
    state.filetrData = data;
};
const removeChange = val => {
    let data = JSON.parse(JSON.stringify(state.filetrData));
    data.forEach((item, index) => {
        if (item.label == val) {
            data.splice(index, 1);
        }
    });
    state.filetrData = data;
};
const realSubmit = async param => {
    let res;
    if (title.value == '编辑') {
        res = await service.auth.orgGroupPageUpdate(param);
    } else {
        res = await service.auth.orgGroupPageSave(param);
    }
    if (res.resultCode == 8200) {
        ElMessage.success(title.value + '成功');
        close();
        emit('refresh');
        // emit('getTree');
    } else {
        state.param.city = param.city.join(',');
        ElMessage.warning(title.value + '失败');
    }
};
//把方法暴露给父组件
defineExpose({
    open,
});
</script>

<template>
    <div class="dialogDiv">
        <el-dialog v-model="visible" :title="title" center :close-on-click-modal="false" @close="close" destroy-on-close :width="700">
            <section>
                <h4 class="labelDiv">
                    {{ label }}
                </h4>
                <el-form :model="state.param" :rules="rules" ref="formRef" label-width="260px" label-suffix=":" onsubmit="return false;">
                    <el-form-item label="组别名称" prop="name">
                        <el-input v-model="state.param.name" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="唯一编码" prop="code">
                        <el-input v-model="state.param.code" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="排序" prop="sort">
                        <el-input v-model="state.param.sort" type="number" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="筛选条件" prop="filterCriteria">
                        <el-tree-select style="width: 100%" @check="filterChange" @remove-tag="removeChange" :data="state.sysdirectList" v-model="state.param.filterCriteria" multiple show-checkbox filterable node-key="label"/>
                    </el-form-item>
                    <el-form-item label="城市" prop="city">
                        <el-tree-select style="width: 100%" :data="state.cityData" v-model="state.param.city" multiple show-checkbox filterable node-key="label" />
                    </el-form-item>
                    <el-form-item label="近1个月还款成功总金额不低于（元）" prop="minimumRepayment">
                        <el-input v-model="state.param.minimumRepayment" type="number" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="近12个月逾期笔数不超过（笔）" prop="maximumOverdue">
                        <el-input v-model="state.param.maximumOverdue" type="number" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-form>
            </section>
            <template #footer v-if="tabName === 1">
                <span class="flex-align-end">
                    <div class="margin-right20">
                        <el-button @click="close">取消</el-button>
                    </div>
                    <el-button type="primary" @click="sure">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
.labelDiv {
    margin-top: 0;
}
:deep(.el-tabs__content) {
    max-height: 300px;
    overflow: auto;
}
/*滚动条整体部分*/
.mytable-scrollbar ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
/*滚动条的轨道*/
.mytable-scrollbar ::-webkit-scrollbar-track {
    background-color: #ffffff;
}
/*滚动条里面的小方块，能向上向下移动*/
.mytable-scrollbar ::-webkit-scrollbar-thumb {
    background-color: #bfbfbf;
    border-radius: 5px;
    border: 1px solid #f1f1f1;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
    background-color: #a8a8a8;
}
.mytable-scrollbar ::-webkit-scrollbar-thumb:active {
    background-color: #787878;
}
/*边角，即两个滚动条的交汇处*/
.mytable-scrollbar ::-webkit-scrollbar-corner {
    background-color: #ffffff;
}
</style>
